<template>
  <div>
    <div class="btn-box">
      <el-button type="primary" @click="onSaveData"> 保存 </el-button>
      <el-button type="primary" icon="RefreshRight" @click="refresh">
        刷新
      </el-button>
    </div>
    <div>
      <div class="form">
        <el-form
          :inline="true"
          label-suffix="："
          label-width="120px"
          size="small"
          ref="form"
        >
          <el-row>
            <el-col :span="5">
              <el-form-item :label="'请款单号'">
                <el-input
                  v-model="query.doccode"
                  clearable
                  placeholder=" "
                  style="width: 100%"
                  :disabled="true"
                />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="结算对象名称" label-width="120px">
                <div class="multiple-container">
                  <el-select
                    v-model="query.entId"
                    placeholder="请选择结算对象"
                    style="width: 40%"
                    clearable
                    filterable
                    @change="changeOfSettle"
                    remote
                    :loading="settlementLoading"
                    :disabled="checkIsDisabled"
                  >
                    <el-option
                      v-for="item in settlementList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                      <span style="float: left">{{ item.label }}</span>
                      <span style="float: right">{{ item.entFullname }}</span>
                    </el-option>
                  </el-select>
                  <el-input
                    v-model="query.entFullname"
                    clearable
                    placeholder=" "
                    style="width: 60%; margin-left: 8px"
                    :disabled="true"
                  />
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item :label="'请款币种'">
                <el-select
                  v-model="query.currency"
                  :placeholder="'请选择请款币种'"
                  style="width: 100%"
                  clearable
                  filterable
                  remote
                  :loading="currentLoading"
                  @change="currencyChangefirst"
                  :disabled="checkIsDisabled"
                >
                  <el-option
                    v-for="item in current"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                    <span style="float: left"> {{ item.label }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="录入人">
                <el-input
                  v-model="query.createBy"
                  clearable
                  placeholder=" "
                  style="width: 100%"
                  :disabled="true"
                />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item :label="'请款金额'">
                <el-input
                  v-model="query.totalmoney"
                  :placeholder="''"
                  style="width: 100%"
                  clearable
                  @blur="jkl = false"
                  :disabled="true"
                />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item :label="'请款日期'">
                <el-date-picker
                  v-model="query.docdate"
                  type="date"
                  clearable
                  :placeholder="'请选择请款日期'"
                  :size="'small'"
                  style="width: 100%"
                  value-format="YYYY-MM-DD"
                  :disabled="checkIsDisabled"
                />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="业务员">
                <el-select
                  v-model="query.salesName"
                  placeholder="请选择业务员"
                  style="width: 100%"
                  clearable
                  filterable
                  remote
                  :remote-method="getSalesman"
                  @change="salesNameFill"
                  :loading="salesmanLoading"
                  :disabled="checkIsDisabled"
                >
                  <el-option
                    v-for="item in salesman"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="审核状态">
                <el-select
                  v-model="query.checkStatus"
                  placeholder="请输入审核状态"
                  style="width: 100%"
                  clearable
                  filterable
                  :disabled="true"
                >
                  <el-option
                    v-for="item in status"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="录入日期">
                <el-date-picker
                  v-model="query.createTime"
                  type="datetime"
                  placeholder=" "
                  :size="'small'"
                  style="width: 100%"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  :disabled="true"
                />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="银行账号">
                <div class="multiple-container">
                  <el-select
                    v-model="query.bankAccountName"
                    placeholder="请选择银行账号"
                    filterable
                    remote
                    :remote-method="getBankAccount"
                    @change="onClickBank"
                    :loading="bankAccountLoding"
                    :disabled="checkIsDisabled"
                  >
                    <el-option
                      v-for="(item, index) in bankAccountList"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    >
                      <span style="float: left">
                        {{ item.bankAccount + '-' + item.accountName }}</span
                      >
                    </el-option>
                  </el-select>
                  <el-input
                    v-model="query.bankAccount"
                    clearable
                    placeholder=" "
                    :disabled="true"
                    style="width: 60%; margin-left: 8px"
                  />
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="20">
              <el-form-item label="摘要">
                <el-input
                  v-model="query.memo"
                  :rows="2"
                  type="textarea"
                  placeholder="请输入摘要"
                  @blur="jkl = false"
                  :disabled="checkIsDisabled"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <!-- 因为使用计算属性要有个输出的地方 -->
    <!-- <span style="display: none">{{ unVerificationMoney }}</span> -->
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import request from '@/public/request'
import { ElMessage, ElMessageBox } from 'element-plus'
import bus from '@/utils/vueBus'
import dayjs from 'dayjs'
import vueBus from '@/utils/vueBus'
export default defineComponent({
  data() {
    return {
      //表单默认值
      query: {
        doccode: '',
        totalmoney: undefined,
        entId: '',
        // 结算对象代码（左）
        entCode: '',
        // 结算对象名称（右）
        entFullname: '',
        currency: '',
        checkStatus: 0,
        createBy: localStorage.getItem('userName'),
        createTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
        salesId: null,
        salesName: null,
        entFullname: '',
        docdate: dayjs().format('YYYY-MM-DD'),
        bankAccount: '',
        bankAccountName: '',
        bankName: '',
        memo: ''
      },
      //结算对象所需数据
      settlementList: [],
      settlementLoading: false,
      //币种类型所需数据
      currentLoading: false,
      current: [],
      //业务员所需数据
      salesmanLoading: false,
      salesman: [],
      exchangeArr: [],
      bankAccountList: [],
      bankAccountLoding: false,
      // 审核状态
      status: [
        {
          label: '草拟',
          value: 0
        },
        {
          label: '提交审核',
          value: 1
        },
        {
          label: '审核通过',
          value: 2
        },
        {
          label: '驳回',
          value: -1
        }
      ],
      jkl: true
    }
  },
  watch: {},
  computed: {
    // 审核状态判断是否可编辑
    checkIsDisabled() {
      if (this.query.checkStatus == 1 || this.query.checkStatus == 2) {
        return true
      } else {
        return false
      }
    }
  },
  mounted() {
    this.getBusDetail()
    this.getCurrentData()
  },
  methods: {
    //获取汇率
    getexchange() {
      this.$http
        .get('/api/base/exchangerate/query', {
          IsIncome: this.query.doctype
        })
        .then((res) => {
          this.exchangeArr = res.content
        })
    },

    // 选择请款币种，并会刷新页面
    currencyChangefirst() {
      this.jkl = false
      this.$emit('clearTableData')
      this.query.totalmoney = 0
      this.query.bankAccount = ''
      this.query.bankAccountName = ''
      this.query.bankName = ''
      //   this.query.feeCurrency = this.query.currency;
    },
    //获取结算对象的数据
    async getBusDetail() {
      this.settlementLoading = true
      let res = await this.$http.get('/api/buenterprise/dropdownlist')
      res.forEach((item) => {
        item.label = item.entCode
        item.value = item.id
      })
      this.settlementList = res
      this.settlementLoading = false
    },
    // 获取币种类型
    async getCurrentData() {
      this.currentLoading = true
      let res = await this.$http.get('/api/base/currency/dropdownlist', {})
      this.current = res.map((item) => {
        return {
          label: item.currencyCode + '|' + item.currencyName,
          value: item.currencyCode
        }
      })
      this.currentLoading = false
    },
    // 获取业务员
    async getSalesman(val) {
      this.salesmanLoading = true
      let res = await this.$http.get('/api/user/userList', {
        keyword: val
      })
      res.forEach((item) => {
        item.label = item.nickName
        item.value = item.id
      })
      this.salesman = res
      this.salesmanLoading = false
    },
    //选择银行账户
    async getBankAccount() {
      if (this.query.currency === '') {
        return
      }
      this.bankAccountLoding = true
      this.bankAccountList = []
      let res = await request.get('/api/companybank/queryByCurrency', {
        Currency: this.query.currency
      })
      res.forEach((item) => {
        item.label = item.accountName
        item.value = item.accountName
      })
      this.bankAccountList = res
      this.bankAccountLoding = false
    },
    //结算对象的值
    changeOfSettle(val) {
      if (val) {
        for (const iterator of this.settlementList) {
          if (iterator.id == val) {
            this.query.entFullname = iterator.entFullname
            this.query.entCode = iterator.entCode
            this.query.entId = iterator.id
          }
        }
        this.jkl = false
      } else {
        this.query.entFullname = ''
        this.query.entCode = ''
        this.jkl = false
      }
      this.$emit('clearTableData')
    },
    // 业务员名称
    salesNameFill(val) {
      if (val) {
        for (const iterator of this.salesman) {
          if (iterator.id == val) {
            this.query.salesName = iterator.label
            this.query.salesId = val
          }
        }
        this.jkl = false
      } else {
        this.query.salesName = null
        this.query.salesId = null
        this.jkl = false
      }
    },
    //获取选中的银行账户
    onClickBank(val) {
      this.bankAccountList.forEach((item) => {
        if (item.label === val) {
          this.query.bankAccount = item.bankAccount
          this.query.bankAccountName = item.accountName
          this.query.bankName = item.bankName
          this.jkl = false
        }
      })
    },
    //保存
    onSaveData() {
      //   if (this.$route.query.currency) {
      //     this.query.isDZ = true;
      //   }
      this.$emit('saveData', this.query)
      this.jkl = true
    },
    // 刷新
    refresh() {
      if (this.$route.query.iscash && this.jkl) {
        this.$emit('editRefresh')
        ElMessage.success('刷新成功')
      } else {
        if (this.jkl) {
          ElMessage.success('刷新成功')
          return
        }
        ElMessageBox.confirm('您编辑的数据还未保存，确认刷新吗？', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            if (this.$route.query.iscash) {
              this.$emit('editRefresh')
              ElMessage.success('刷新成功')
              this.jkl = true
            } else {
              this.query = {
                totalmoney: undefined,
                entId: '',
                currency: '',
                checkStatus: 0,
                createBy: localStorage.getItem('userName'),
                createTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
                salesId: null,
                salesName: null,
                entFullname: '',
                docdate: dayjs().format('YYYY-MM-DD'),
                bankAccount: '',
                bankAccountName: '',
                bankName: ''
              }
              ElMessage.success('刷新成功')
            }
          })
          .catch(() => {})
      }
    }
  }
})
</script>

<style lang="scss" scoped>
:deep(.el-checkbox__inner) {
  width: 20px !important;
  height: 20px !important;
}
:deep(.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after) {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.multiple-container {
  display: flex;
  align-items: center;
  width: 100%;
}

.btn-box {
  margin-bottom: 8px;
}

:deep(.el-form-item--small .el-form-item__label) {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.85);
}

:deep(.el-input--suffix .el-input__inner) {
  padding-right: 4px;
}

:deep(.el-form--inline .el-form-item) {
  display: flex;
  margin-right: 0;
}

:deep(.el-select__wrapper.is-disabled span) {
  color: #a8abb2 !important;
}

:deep(.el-form-item--small.el-form-item) {
  margin-bottom: 8px;
}
</style>
